<%@ page contentType="text/html; charset=UTF-8" %>
<% 
	String realPath = request.getContextPath();  
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>图片新闻详情</title>
    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/basic.css" rel="stylesheet">
    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/swiper.min.css" rel="stylesheet">
    <link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/index.css" rel="stylesheet">

    <script type="text/javascript" src="<%=realPath%>/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
	<script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>
</head>
<body>
<header class="news-hd news-imgList-hd clearfix">
    <div class="mod-back-btn fn-fl" id='backPrevPage'><i class="i-topPoint"></i></div>
    <div class="mod-header-txt fn-fl">${news.title}</div>
    <div class="mod-back-btn fn-fr j-share"><i class="i-ellips">●●●</i></div>
</header>
<section class="news-imgList-content ">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--这是最后一个推荐图集 Start-->
            <div class="swiper-slide" id="recommendNews" style="display:none;">
                <div class="news-imgList-group-ul">
                    <div class="news-imgList-content-hd fn-tal">
                        <i class="i-select mr5"></i>图集浏览完毕
                    </div>
                    <div class="news-ground-tip fn-tal">
                        <i class="i-ground"></i>推荐图集
                    </div>
                    <ul class="news-imgList-ul">
                        <li>
                            <a href="<%=realPath%>/path/newsinfo/viewnewsphone?id=5e88a3d0155e8e5f6f20058" class="news-imgList-item fn-pr">
                                <div class="news-imgList-item-img">
                                    <img src="<%=realPath%>/zenithsun/news/images/2016/0714/5e9e2170155e9eacdb40091.jpg" alt="万家灯火，南海有我 ，南方电网供电服务已至三沙" />
                                </div>
                                <div class="news-imgList-item-hd">
                                    <h3 class="news-imgList-item-txt">万家灯火，南海有我</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="<%=realPath%>/path/newsinfo/viewnewsphone?id=5e99d830155e9a9e52d000e" class="news-imgList-item fn-pr">
                                <div class="news-imgList-item-img">
                                    <img src="<%=realPath%>/zenithsun/news/images/2016/0714/5e99d830155e9a9d085000d.jpg" alt="绿色环保 节能减排" />
                                </div>
                                <div class="news-imgList-item-hd">
                                    <h3 class="news-imgList-item-txt">绿色环保 节能减排</h3>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="swiper-button-next"><a href="javascript:void();" id="nextNews">下一图集</a></div>
                    <div class="swiper-button-prev"><a href="javascript:swiperGotoPrev();">上一图片</a></div>
                </div>
            </div>
            <!--这是最后一个推荐图集 End-->
        </div>
    </div>
</section>

<!--S:分享-->
<div class="share-pop"></div>
<section class="mod-share">
    <div class="mod-share-grid">
        <header>分享到</header>
        <div class="mod-share-bd">
            <ul class="clearfix">
               <li class="fn-fl">
                    <a href="#" target="_blank" id="qqFriend">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-qq.png" /></em>
                        <span>QQ好友</span>
                    </a>
				</li>
				<li class="fn-fl">
                    <a href="#" target="_blank" id="sina">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-sina.png" /></em>
                        <span>新浪微博</span>
                    </a>
                </li>
				<li class="fn-fl">
                    <a href="#" target="_blank" id="qqMicroBlog">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-tqq.png" /></em>
                        <span>腾讯微博</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#" target="_blank" id="qqzone">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-zqq.png" /></em>
                        <span>QQ空间</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-wx.png" /> </em>
                        <span>微信好友</span>
                    </a>
                </li>
                <li class="fn-fl">
                    <a href="#">
                        <em><img src="<%=realPath%>/zenithsun/news/mobile/images/i-wxq.png" /></em>
                        <span>微信朋友圈</span>
                    </a>
                </li>
            </ul>
        </div>

        <a href="javascript:void(0)" class="mod-share-close j-share-close">取 消</a>
    </div>
</section>
<!--E:分享-->
<div id="newsTemplate" style="display: none;">
	<div class="swiper-slide">
		<div class="news-imgList-img">
			<img src="${newsImagePath}%news.pic%" alt="" />
		</div>
		<div class="news-imgList-info">
			<div class="news-imgList-info-wrap">
				<header class="news-imgList-header clearfix">
					<p class="news-imgList-num fn-fl"><em><i>%currNum%</i>/</em>%totalCount%</p>
					<div class="news-imgList-header-hd fn-fl">
						<p class="news-imgList-org fn-wto">编辑：%news.editor% / 摄影：%news.photographer%</p>
						<p class="news-imgList-time"><span class="mr10">%news.publishTime%</span><span><i class="i-eye"></i>${news.pageViewCounter+1}</span> </p>
					</div>
				</header>
				<article class="news-imgList-article clearfix">
				   <div class="news-article-content fn-tal fn-fl"><p>%news.content%</p></div>
					<a href="javascript:void(0);" data-key="o" class="news-article-btn fn-fr j-news-btn"></a>
				</article>
			</div>
		</div>
    </div>	
</div>
<script type="text/javascript" src="<%=realPath%>/zenithsun/news/mobile/js/swiper.min.js"></script>
<script type="text/javascript" src="<%=realPath%>/zenithsun/news/mobile/js/newsinfo.js"></script>
<script>
	var realPath="<%=realPath%>/";
	doLoadNewsInfo('${news.id}');
    var swiperC =null;
	var newsInfo={title:"${news.title}",coverPath:"${newsImagePath}${news.coverPath}"};
	var share1=new ShareTip(window.location.href,newsInfo);  
    $(function(){
        $.ajax({
			type : "POST",
			url : "${pageContext.request.contextPath}/path/newsinfo/modCounter",
			data : {id:"${news.id}"},
			success : function(data) {
			}
		});
				      
        $(".swiper-wrapper").on('click',".j-news-btn",function(){
            var $Dkey = $(this).attr("data-key");
            var $dh = $(this).parents(".news-imgList-article").siblings(".news-imgList-header").height();
			var $oh = $(this).siblings(".news-article-content").find("p").height();
			var $ph = $dh + $oh + 30 +"px";
			console.log($ph);
            if($Dkey=="o"){
                $(this).parents(".news-imgList-info").animate({height:$ph},800);
                $(this).addClass("news-article-btn-down");
                $(this).attr("data-key","f");
            }else if($Dkey=="f"){
            	$(this).parents(".news-imgList-info").animate({height:"30%"},800);
                $(this).removeClass("news-article-btn-down");
                $(this).attr("data-key","o");
            }
        });
		 //分享
        $(".j-share").click(function(){
            $(".share-pop,.mod-share").show();
            $(".mod-share").animate({bottom:"0"});
				$('#qqMicroBlog').attr('href',ShareQQMicroBlog());
				$('#qqzone').attr('href',ShareQQZone());
				$('#sina').attr('href',ShareSina());
				$('#qqFriend').attr('href',ShareQQFriend());
        });
        $(".j-share-close").click(function(){
            $(".mod-share").animate({bottom:"-90%"});
            $(".share-pop").hide();
        });
		$("#backPrevPage").click(function(){
			//window.location.href=realPath+"path/newsinfo/initnewsCol_phone?id=${news.newsColumns.id}";
			window.history.back();
        });
		//获取下一图集
		$("#nextNews").click(function(){
			var path = "${pageContext.request.contextPath}/path/newsinfo/";
			$.post(path+"getRandomNewsId",{"currentId":"${news.id}"},function(data){
				if(data.state == 'Success'){
					var nextId = data.content;
					location.href = path+"viewnewsphone?id="+nextId;
				}else{
					alert('加载下一图集失败');
				}
			});
        });
    });
</script>
</body>
</html>